<template>
	<view class="bookstore-container">
		<view class="search-bar">
			<view class="search-box">
				<text class="iconfont icon-search">🔍</text>
				<input type="text" v-model="searchKeyword" placeholder="搜索书名或作者" @confirm="searchBooks" />
			</view>
		</view>
		
		<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
			<view 
				class="category-item" 
				v-for="(item, index) in categories" 
				:key="index"
				:class="{active: currentCategory === item.id}"
				@click="selectCategory(item.id)"
			>
				{{item.name}}
			</view>
		</scroll-view>
		
		<swiper class="banner" indicator-dots autoplay :interval="3000" :duration="500">
			<swiper-item v-for="(banner, index) in banners" :key="index">
				<image :src="banner.imageUrl" mode="aspectFill" @click="goToDetail(banner.bookId)"></image>
			</swiper-item>
		</swiper>
		
		<view class="section">
			<view class="section-header">
				<text class="section-title">热门推荐</text>
				<text class="more-link" @click="viewMore('hot')">查看更多</text>
			</view>
			<scroll-view scroll-x class="book-scroll" show-scrollbar="false">
				<view class="book-item" v-for="(book, index) in hotBooks" :key="index" @click="goToDetail(book.id)">
					<image class="book-cover" :src="book.coverUrl" mode="aspectFill"></image>
					<text class="book-title">{{book.title}}</text>
					<text class="book-author">{{book.author}}</text>
				</view>
			</scroll-view>
		</view>
		
		<view class="section">
			<view class="section-header">
				<text class="section-title">新书上架</text>
				<text class="more-link" @click="viewMore('new')">查看更多</text>
			</view>
			<scroll-view scroll-x class="book-scroll" show-scrollbar="false">
				<view class="book-item" v-for="(book, index) in newBooks" :key="index" @click="goToDetail(book.id)">
					<image class="book-cover" :src="book.coverUrl" mode="aspectFill"></image>
					<text class="book-title">{{book.title}}</text>
					<text class="book-author">{{book.author}}</text>
				</view>
			</scroll-view>
		</view>
		
		<view class="section">
			<view class="section-header">
				<text class="section-title">猜你喜欢</text>
				<text class="more-link" @click="viewMore('recommend')">查看更多</text>
			</view>
			<view class="book-grid">
				<view class="grid-item" v-for="(book, index) in recommendBooks" :key="index" @click="goToDetail(book.id)">
					<image class="book-cover" :src="book.coverUrl" mode="aspectFill"></image>
					<text class="book-title">{{book.title}}</text>
					<text class="book-author">{{book.author}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				currentCategory: 0,
				categories: [
					{ id: 0, name: '全部' },
					{ id: 1, name: '玄幻' },
					{ id: 2, name: '科幻' },
					{ id: 3, name: '武侠' },
					{ id: 4, name: '言情' },
					{ id: 5, name: '历史' },
					{ id: 6, name: '军事' },
					{ id: 7, name: '推理' },
					{ id: 8, name: '恐怖' }
				],
				banners: [
					{ 
						imageUrl: 'https://img9.doubanio.com/view/subject/s/public/s33880929.jpg', 
						bookId: 2 
					},
					{ 
						imageUrl: 'https://img9.doubanio.com/view/subject/s/public/s2768378.jpg', 
						bookId: 1 
					},
					{ 
						imageUrl: 'https://img1.doubanio.com/view/subject/s/public/s6384944.jpg', 
						bookId: 3 
					}
				],
				hotBooks: [
					{
						id: 1,
						title: '三体',
						author: '刘慈欣',
						coverUrl: 'https://img9.doubanio.com/view/subject/s/public/s2768378.jpg',
						category: '科幻'
					},
					{
						id: 2,
						title: '活着',
						author: '余华',
						coverUrl: 'https://img9.doubanio.com/view/subject/s/public/s33880929.jpg',
						category: '文学'
					},
					{
						id: 3,
						title: '百年孤独',
						author: '加西亚·马尔克斯',
						coverUrl: 'https://img1.doubanio.com/view/subject/s/public/s6384944.jpg',
						category: '文学'
					},
					{
						id: 4,
						title: '红楼梦',
						author: '曹雪芹',
						coverUrl: 'https://img1.doubanio.com/view/subject/s/public/s1070959.jpg',
						category: '古典'
					},
					{
						id: 5,
						title: '平凡的世界',
						author: '路遥',
						coverUrl: 'https://img9.doubanio.com/view/subject/s/public/s1144911.jpg',
						category: '文学'
					}
				],
				recommendBooks: [
					{
						id: 11,
						title: '沉默的大多数',
						author: '王小波',
						coverUrl: 'https://img1.doubanio.com/view/subject/s/public/s1447349.jpg',
						category: '文学'
					},
					{
						id: 12,
						title: '月亮与六便士',
						author: '毛姆',
						coverUrl: 'https://img1.doubanio.com/view/subject/s/public/s2659208.jpg',
						category: '文学'
					},
					{
						id: 13,
						title: '挪威的森林',
						author: '村上春树',
						coverUrl: 'https://img9.doubanio.com/view/subject/s/public/s1228930.jpg',
						category: '文学'
					},
					{
						id: 14,
						title: '1984',
						author: '乔治·奥威尔',
						coverUrl: 'https://img2.doubanio.com/view/subject/s/public/s4371408.jpg',
						category: '科幻'
					},
					{
						id: 15,
						title: '动物农场',
						author: '乔治·奥威尔',
						coverUrl: 'https://img1.doubanio.com/view/subject/s/public/s2347590.jpg',
						category: '寓言'
					},
					{
						id: 16,
						title: '追风筝的人',
						author: '卡勒德·胡赛尼',
						coverUrl: 'https://img9.doubanio.com/view/subject/s/public/s1727290.jpg',
						category: '小说'
					}
				],
				newBooks: [
					{
						id: 6,
						title: '云边有个小卖部',
						author: '张嘉佳',
						coverUrl: 'https://img2.doubanio.com/view/subject/s/public/s29799089.jpg',
						category: '文学'
					},
					{
						id: 7,
						title: '人类简史',
						author: '尤瓦尔·赫拉利',
						coverUrl: 'https://img3.doubanio.com/view/subject/s/public/s27814883.jpg',
						category: '历史'
					},
					{
						id: 8,
						title: '解忧杂货店',
						author: '东野圭吾',
						coverUrl: 'https://img9.doubanio.com/view/subject/s/public/s27264181.jpg',
						category: '小说'
					},
					{
						id: 9,
						title: '白夜行',
						author: '东野圭吾',
						coverUrl: 'https://img1.doubanio.com/view/subject/s/public/s24514468.jpg',
						category: '推理'
					},
					{
						id: 10,
						title: '围城',
						author: '钱钟书',
						coverUrl: 'https://img2.doubanio.com/view/subject/s/public/s1070222.jpg',
						category: '文学'
					}
				]
			}
		},
		methods: {
			searchBooks() {
				if (this.searchKeyword.trim()) {
					uni.showToast({
						title: `搜索：${this.searchKeyword}`,
						icon: 'none'
					});
					// 实际项目中这里应该调用搜索API
				}
			},
			selectCategory(categoryId) {
				this.currentCategory = categoryId;
				uni.showToast({
					title: `已选择分类：${this.categories.find(item => item.id === categoryId).name}`,
					icon: 'none'
				});
				// 实际项目中这里应该根据分类获取书籍列表
			},
			goToDetail(bookId) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${bookId}`
				});
			},
			viewMore(type) {
				let title = '';
				switch(type) {
					case 'hot':
						title = '热门推荐';
						break;
					case 'new':
						title = '新书上架';
						break;
					case 'recommend':
						title = '猜你喜欢';
						break;
				}
				uni.showToast({
					title: `查看更多：${title}`,
					icon: 'none'
				});
				// 实际项目中这里应该跳转到对应的书籍列表页
			}
		}
	}
</script>

<style>
	.bookstore-container {
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}
	
	.search-bar {
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}
	
	.search-box {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
	}
	
	.icon-search {
		margin-right: 10rpx;
		font-size: 32rpx;
		color: #999;
	}
	
	.category-scroll {
		white-space: nowrap;
		margin-bottom: 20rpx;
	}
	
	.category-item {
		display: inline-block;
		padding: 10rpx 30rpx;
		margin-right: 20rpx;
		background-color: #fff;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #666;
	}
	
	.category-item.active {
		background-color: #d81e06;
		color: #fff;
	}
	
	.banner {
		height: 300rpx;
		border-radius: 15rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}
	
	.banner image {
		width: 100%;
		height: 100%;
	}
	
	.section {
		margin-bottom: 30rpx;
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.more-link {
		font-size: 26rpx;
		color: #999;
	}
	
	.book-scroll {
		white-space: nowrap;
	}
	
	.book-item {
		display: inline-block;
		width: 200rpx;
		margin-right: 20rpx;
		vertical-align: top;
	}
	
	.book-cover {
		width: 200rpx;
		height: 280rpx;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.book-title {
		font-size: 28rpx;
		color: #333;
		line-height: 1.2;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}
	
	.book-author {
		font-size: 24rpx;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}
	
	.book-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.grid-item {
		width: 31%;
		margin-bottom: 20rpx;
	}
</style>